vue+element 纯前端实现导出表格数据为csv
导出
export default {
name:'userInfo',
data() {
tableData: [{
user_id:'',
id:'',
username:'',
piname:'',
createtime:'',
firstLoginTime:'',
system:'',
lastLoginTime:''
}]
},
methods: {
getExportList() {
const _self=this
let jsonData = {
trade:{
tHeader: ["用户标识","用户名称","创建人","创建时间","首次登录时间","来源系统","最近登录时间"],
filterVal: ["user_id","username","piname","createtime","firstLoginTime","system","lastLoginTime"],
list: _self.tableData
}
}
_self.exportPathMethod(jsonData)// 调用exportPathMethod对数据进行处理导出
_self.exportShow=false
},
exportPathMethod(data) {
/*
*注:csv文件:","逗号换列,\n换行,\t防止excel将长数字变科学计算法等样式
*/
//要导出的json数据
let mainLists = data.trade //主表
let _self = this
//## 数据处理
//一级表
let mainTitle = mainLists.tHeader;//一级标题
let mainTitleForKey = mainLists.filterVal;//一级过滤
let mainList = mainLists.list;//一级数据
let mainStr = [];
mainStr.push(mainTitle.join("\t,")+"\n"); //标题添加上换列转成字符串并存进数组
for(let i=0;i {
tableDataList.push({
"用户标识":item.admin_id,
"用户名称":item.username,
"创建人":item.piname,
"创建时间":item.create_time,
"首次登录时间":item.firstLoginTime,
"来源系统":item.system,
"最近登录时间":item.login_time
})
})
let data = _self.export_pagination === '1' ? tableList:tableDataList
let header = {header: ["用户标识","用户名称","创建人","创建时间","首次登录时间","来源系统","最近登录时间"] }
let ws = XLSX.utils.json_to_sheet(data, header)
let wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, `用户信息${_self.$moment(_self.$moment().valueOf()).format('YYYYMMDD')}.csv`)
XLSX.writeFile(wb, `用户信息${_self.$moment(_self.$moment().valueOf()).format('YYYYMMDD')}.csv`)
}
导入
import XLSX from 'xlsx'
// file是传进来excel文件
getExcelFileData(file) {
var excelData = []
//声明一个文件读取器
const fileReader = new FileReader()
//文件读取成功时触发事件
fileReader.onload=ev=>{
try{
读取的文件
const data = ev.target.result
//以二进制流方式读取得到整份excel表格
const workbook = XLSX.read(data,{type:'binary'})对象
// 循环遍历excel的sheet
Object.keys(workbook.Sheets).forEach((sheet,index)=>{
console.info(workbook.Sheets[sheet]['!ref'])
excelData.push(
//
将excel 转换成json对象放入数组中
...XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
)
})
// 自定义事件,比如校验excel数据。转换数据格式…
checkingExcelData(excelData)
}catch(e){
console.err('文件类型不正确')
}
}
//读取文件
fileReader.readAsBinaryString(file)
}
2020/7/2 之前的csv导出 最后一列因为换行的原因导致会有一部分内容看不到 再换行之前加个/t就可以解决 2020/7/30 修正bug 第三方测试中发现之前的纯前端导出csv在edge和ie浏览器下导出 这块edge和ie兼容有问题 现出一个vue的可以兼容主流浏览器的导出csv的写法
npm install file-saver
npm install --save json2csv
import FileSaver from 'file-saver';
exportPathMethod(data) {
this.exportCSV(this.export_pagination === '1'? this.tableList:this.tableDataList)
},
exportCSV(data, filename=`用户信息${this.$moment(this.$moment().valueOf()).format('YYYYMMDD')}.csv`){
const Json2csvParser = require('json2csv').Parser;
const parser = new Json2csvParser();
const csvData = parser.parse(data);
const blob = new Blob(['\uFEFF' + csvData], {type: 'text/plain;charset=utf-8;'});
FileSaver.saveAs(blob, filename);
},
|